<template>
	<view class="gift">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="topBox">
				<view class="head1">
					<view class="searchBox">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975652195245.png" mode="">
						</image>
						<input type="text" v-model="searchValue" @input="searchCustomers" placeholder="请输入搜索内容"/>
						<!-- <button style="width: 50rpx; height: 30rpx; background-color: #000;"></button> -->
					</view>
				</view>
				<view class="topList">
					<block v-for="(item, index) in tabList" :key="index">
						<view class="topCell" :class="item.value == nowIndex ? 'topCellIng' : ''" @click="chooseTab(item.value)">
							{{ item.label }}
							<view class="unReadNum" v-if="item.count">{{item.count}}</view>
						</view>
					</block>
				</view>
				<view class="navBox">
					<view class="sign_nav">
						<view class="nav_cell" @click="exportFile()">
							<view class="icon">
								<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231128405741313.png" mode="aspectFill"></image>
							</view>
							<view class="tit">
								导出订单
							</view>
						</view>
						<block v-if="nowIndex==1">
							<view class="nav_line"></view>
							<view class="nav_cell" @click="importFile()">
								<view class="icon">
									<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723113357296396.png" mode="aspectFill"></image>
								</view>
								<view class="tit">
									导入物流单号
								</view>
							</view>
						</block>
						
					</view>
				</view>
			</view>
			<view style="height: 300rpx;"></view>
			
			<block v-if="orderList.length > 0">
				<view class="item" v-for="(item, index) in orderList" :key="index"  @click="nav_to(`/pages/store/orderDetail?id=${item.ID}`)">
					<view class="single">
						<view class="single_titbox">
							<view class="titbox_tit">
								订单号：{{item.OrderNo||'--'}}
							</view>
							<view class="titbox_status">
								{{getStoreStatus(item.Status)}}
							</view>
						</view>
						<view class="address">
							<view class="address_cell">
								<view class="icon">
									<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723104520140211.png" mode="aspectFill"></image>
								</view>
								<view class="name">
									{{item.Delivery_Accepter || '--'}}{{' '}}{{item.Delivery_Phone || '--'}}
								</view>
							</view>
							<view class="address_cell" v-if="item.Delivery_Address">
								<view class="icon"></view>
								<view class="lit">
									<text v-if="item.Delivery_Province">{{item.Delivery_Province}}</text> 
									<text v-if="item.Delivery_City">{{item.Delivery_City}}</text>
									<text v-if="item.Delivery_Address">{{item.Delivery_Address}}</text>
								</view>
							</view>
						</view>
						<view class="border" v-for="(el,i) in item.Item" :key="i">
							<view class="single_img">
								<image :src="imgeone(el.ProductImg)" mode="aspectFill"></image>
							</view>
							<view class="single_right">
								<view class="single_title">
									<view class="single_title_text hiddenText">
										{{ el.ProductName || '--'}}
									</view>
								</view>

								<view class="single_tabs">
									<view class="single_tab" v-for="(tag, index) in tagsArray" :key="index">{{ tag }}</view>
								</view>
								<view class="single_spec">
									<view class="single_style">
										{{ el.Style || '--' }}
									</view>
									<view class="single_style">数量：{{  el.Qty || '--' }}</view>
								</view>
								<view class="single_bottom">
									<view class="single_price">
										<view class="dollor">￥</view>
										{{ item.Price || '--' }}
									</view>
									<!-- <view class="user_send" v-if="item.OrderType=='赠送订单'">
										<view class="head">
											<image :src="item.SenderHeadImgUrl || 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722996894207462.png'" mode="aspectFill"></image>
										</view>
										<view class="name">
											{{item.SenderName || '--'}}赠送
										</view>
									</view> -->
								</view>
							</view>
						</view>
						<!-- <view class="time">
							订单时间：{{$util.formatDateTime(item.OrderTime)}}
						</view> -->
						<view class="single_btn" v-if="item.Status==1">
							<view class="btn_cell">
								填写快递单号
							</view>
						</view>
					</view>
					
				</view>
				<view style="height: 50rpx;"></view>
			</block>
			<block v-else>
				<EmptyBox text="还没订单哦"></EmptyBox>
			</block>
		</block>
	</view>
</template>

<script>
import color from 'uview-ui/libs/config/color';

export default {
	data() {
		return {
			load: false, //是否加载
			PageIndex: 1, //页码
			PageSize:30,
			orderList: [], //商品列表
			isMore: true, //是否还有更多
			tabList: [
				//顶部状态选择
				{
					label: '全部',
					value: 99,
					count:0
				},
				{
					label: '待发货',
					value: 1,
					count:0
				},
				{
					label: '派送中',
					value: 3,
					count:0
				},
				{
					label: '已完成',
					value: 4,
					count:0
				},
				{
					label: '已退货',
					value: -2,
					count:0
				},
			],
			nowIndex: 99, //当前选中状态
			
			searchValue:''
		};
	},

	computed: {},
	watch: {},

	onReady() {},

	async onLoad(e) {
		this.nowIndex = e.index
		this.getList();
		this.getMyCount()
		uni.$on('storeOrder',()=>{
			this.PageIndex = 1
			this.getList();
			this.getMyCount()
		})
	},
	onUnload() {
		uni.$off('storeOrder')
	},

	methods: {
		searchCustomers(e){
			this.$util.debounce(()=>{
				this.searchValue = e.detail.value.replace(/\s+/g, "")
				this.PageIndex = 1
				this.getList({Keywords:this.searchValue});
				this.getMyCount()
			},300)
		},
		async getMyCount(){
			for (var i = 0; i < this.tabList.length; i++) {
				if(i==1 || i==2){
					this.tabList[i].count = await this.getUnread(this.tabList[i].value)
				}
			}
		},
		async	getUnread(Status){
			let res = await this.$api.post('/Order/MyShopOrders',{
				PageIndex:1,
				PageSize:999,
				Status
			})
			
			return res.data ? res.data.length : 0
		},
		getStoreStatus(s){
			return s==-2 ? '已退货' : s==1 ? '待发货' : s==3 ? '派送中' : s==4 ? '已完成' : ''
		},
		imgeone(img) {
			return img.split(',')[0];
		},
		// 获取商品列表
		async getList(params={}) {
			const res = await this.$api.post('/Order/MyShopOrders', {
				PageIndex: this.PageIndex, // 页码
				PageSize: this.PageSize, // 一页数量
				Status: this.nowIndex,
				...params
			});

			if (res.code == 0) {
				this.orderList = this.PageIndex == 1 ? res.data : this.orderList.concat(res.data);
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
				this.load = true;
			}else if(res.code==100){
				this.orderList = []
				this.load = true;
			}else{
				this.$pv.msg(res.message)
			}

			
		},
		// 选择Tab
		chooseTab(value) {
			this.nowIndex = value;
			this.PageIndex = 1;
			this.getList();
		},
		async exportFile(){
			if(!this.orderList.length){
				this.$pv.msg('暂无可导出的订单')
				return
			}
			let res = await this.$api.post('/Order/Export',{Status:this.nowIndex})
			if(res.code==0){
				uni.downloadFile({
					url:res.data,
					success: (res) => {
						if(res.statusCode === 200){
							let filePath = res.tempFilePath
							uni.openDocument({
								filePath,
								showMenu:true,
								success: res => {
									console.log(res);
								},
								fail: err=> {
									this.$pv.msg(err) //失败
								}
							})
						}
					},
					fail: (err) => {
						this.$pv.msg(err) //失败
					}
				})
				
			}else if(res.code==100){
				this.$pv.msg(res.message)
			}
		},
		importFile(){
			this.nav_to('/pages/store/import')
			// uni.chooseMessageFile({
			// 	count:1,
			// 	type:'file',
			// 	success:(res)=>{
			// 		console.log(res);
					
			// 	}
			// })
		},
		uploadFun(url){
			this.$pv.load('正在上传');
			this.$upload(url,()=>{})
			this.$pv.closeLoad()
		}
	},

	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.getList();
		}
	},
};
</script>

<style lang="scss">
page {
	// height: 100%;
	background: #f6f6f6;
}

.gift {
	display: flex;
	flex-direction: column;
	align-items: center;
	// padding-top: 240rpx;
	.navBox{
		// position: fixed;
		// top: 88rpx;
		width: 100%;
		padding: 14rpx 20rpx;
		background-color: #f6f6f6;
		box-shadow:  0 0 8rpx #ccc;
		.sign_nav{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.nav_cell{
				flex: 1;
				// width: 50%;
				padding: 14rpx 0;
				display: flex;
				align-content: center;
				justify-content: center;
				.icon{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.tit{
					font-size: 28rpx;
					color: #333333;
				}
			}
			.nav_line{
				width: 2rpx;
				height: 42rpx;
				background-color: #C2C2C2;
			}
			
		}
	}
	
	
	.item {
		// margin: 30rpx 0;

		.single {
			width: 700rpx;
			// height: 252rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			.single_titbox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin-top: 20rpx;
				.titbox_tit{
					font-size: 32rpx;
					color: #333333;
				}
				.titbox_status{
					font-size: 28rpx;
					color: #FF6030;
				}
			}
			.address{
				margin-top: 20rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 24rpx;
				.address_cell{
					display: flex;
					align-items: center;
					.icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.name{
						font-weight: bold;
						font-size: 32rpx;
					}
					.lit{
						width: 92%;
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #666666;
						text{
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
			.time{
				color: #999;
				font-size: 26rpx;
				padding-bottom: 20rpx;
			}
			.single_btn{
				margin-top: 4rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.btn_cell{
					font-size: 28rpx;
					color: #FFFFFF;
					padding: 16rpx 32rpx;
					background: linear-gradient( 98deg, #FFAD26 0%, #FE4E01 100%);
					border-radius: 36rpx;
				}
			}
			.border {
				display: flex;
				align-items: center;
				// border-bottom: 1rpx solid #E4E4E4;
				padding: 20rpx 0;

				.single_img {
					width: 204rpx;
					height: 204rpx;
					margin-right: 10rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.single_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 10rpx;
					/* margin: 0 5rpx 0 10rpx; */
					min-height: 200rpx;

					.single_title {
						width: 100%;
						display: flex;
						align-items: center;

						.single_title_text {
							width: 430rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						.single_title_state {
							flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #ff6030;
						}
					}

					.single_tabs {
						display: flex;
						margin: 10rpx 0 10rpx -5rpx;

						.single_tab {
							width: 104rpx;
							height: 36rpx;
							border-radius: 8rpx;
							border: 1rpx solid #f91c1c;
							font-size: 20rpx;
							color: #f91c1c;
							margin: 0 5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.single_spec {
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24rpx;
						.single_style {
							font-weight: 500;
							font-size: 24rpx;
							color: #ff6030;
							// color: #999999;
						}
					}

					.single_bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.single_price {
							font-weight: bold;
							font-size: 42rpx;
							color: #333333;
							display: flex;
							align-items: baseline;

							.dollor {
								font-weight: bold;
								font-size: 24rpx;
								color: #333333;
							}
						}
						.user_send{
							display: flex;
							align-items: center;
							.head{
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
								border-radius: 50%;
								image{
									width: 100%;
									height: 100%;
								}
							}
							.name{
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
			}

			.border:last-child {
				border-bottom: none;
			}
		}
	}
}

.topBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #ffffff;
	.head1 {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: fixed;
		// top: 0;
		// left: 0;
		box-shadow: 0 0 8rpx #ccc;
		.searchBox {
			width: 93%;
			height: 72rpx;
			background: #F6F6F6;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			color: #666666;
	
			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 10rpx 0 20rpx;
			}
			
			input {
				width: 80%;
			}
		}
	}
	.topList {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		
		.topCell {
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			position: relative;
		}

		.topCellIng {
			position: relative;
			color: #ff6030;

			&::before {
				position: absolute;
				content: '';
				left: 0;
				bottom: -18rpx;
				width: 100%;
				height: 6rpx;
				background: #ff6030;
				border-radius: 5rpx;
			}
		}
		.unReadNum {
			max-width: 48rpx;
			min-width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: -30rpx;
			top: -10rpx;
			font-size: 22rpx;
			background-color: #FC201C;
			color: white;
			padding: 5rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
